<?php

/**头像上传 组件
*使用示例:<?php $this->widget('ext.datepickerwidget',array('model'=>$model,'name'=>'vip_deadline','style'=>'border:1px solid #c5c5c5'));?>
*/

class UploadlogoWidget extends CWidget
{
	public $model=null;
	public $name='date';//选择框变量名
	public $value;//初始值
	public $lang = 'zh_cn';//语言
	public $bili='1/1';//比例
	public function init()
	{
	}

	public function run()
	{
		echo '<link rel="stylesheet" href="'.Yii::app()->request->baseUrl.'/public/css/uploadlogo/cropper.min.css" type="text/css">';
		echo '<link rel="stylesheet" href="'.Yii::app()->request->baseUrl.'/public/css/uploadlogo/ImgCropping.css" type="text/css">';
		if(!empty($this->model))
		{
			$str=$this->model[$this->name];
		}
		else
		{
			$str='';
		}
		$btn = '<div id="replaceImg" class="l-btn" style="cursor: pointer;float: left;margin-top: 190px;margin-left: 20px;">更换图片</div>';
		$img = '<div style="width: 200px;height: 200px;border: solid 1px #555;padding: 5px;margin-top: 10px;float: left;"><img id="finalImg" src="/img/'.$str.'" width="100%"></div>';
		$ipt = '<input class="text" style="display:none;" name="'.get_class($this->model).'['.$this->name.']" id="hiddenlogoipt" type="text" value="">';

		//裁剪框
		$caijian = '<div style="display: none" class="tailoring-container">
					    <div class="black-cloth" onclick="closeTailor(this)"></div>
					    <div class="tailoring-content">
					            <div class="tailoring-content-one">
					                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
					                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
					                    选择图片
					                </label>
					                <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
					            </div>
					            <div class="tailoring-content-two">
					                <div class="tailoring-box-parcel">
					                    <img id="tailoringImg">
					                </div>
					                <div class="preview-box-parcel">
					                    <p>图片预览：</p>
					                    <div class="square previewImg"></div>
					                    <div class="circular previewImg"></div>
					                </div>
					            </div>
					            <div class="tailoring-content-three">
					                <div class="l-btn cropper-reset-btn">复位</div>
					                <div class="l-btn cropper-rotate-btn">旋转</div>
					                <div class="l-btn cropper-scaleX-btn">换向</div>
					                <div class="l-btn sureCut" id="sureCut">确定</div>
					            </div>
					        </div>
					</div>';
		echo $img.$btn.$ipt.$caijian;

		echo '<script src="'.Yii::app()->request->baseUrl.'/public/js/uploadlogo/cropper.min.js"></script>';

		echo "<script>//cropper图片裁剪
				$('#tailoringImg').cropper({
				    aspectRatio: ".$this->bili.",//默认比例
				    preview: '.previewImg',//预览视图
				    guides: false,  //裁剪框的虚线(九宫格)
				    autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
				    dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
				    movable: true,  //是否允许移动剪裁框
				    resizable: true,  //是否允许改变裁剪框的大小
				    zoomable: false,  //是否允许缩放图片大小
				    mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
				    touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
				    rotatable: true,  //是否允许旋转图片
				    crop: function(e) {
				        // 输出结果数据裁剪图像。
				    }
				});</script>";



		echo '<script src="'.Yii::app()->request->baseUrl.'/public/js/uploadlogo/uploadlogo.js?as"></script>';

		// $this->registerClientScript();
	}

	protected  function registerClientScript()
	{
		$cs=Yii::app()->clientScript;
	    $cs->registerScriptFile(Yii::app()->request->baseUrl."/public/js/uploadlogo/cropper.min.js");
	}
}